
import { h ,render} from "vue";
import XtxMessage from './index.vue'
type MessageProps = {
  type:'success' | 'error' | 'warning',
  text:string
  duration?:number
}
// 声明延时器
let timer = -1
// 优化1 准备一个容器 存放显示/隐藏的弹框
const divContainer = document.createElement('div')
divContainer.setAttribute('class','xtx-message-container')
document.body.appendChild(divContainer)

export default function Message({type,text,duration=2000}:MessageProps){
  const vNode = h(XtxMessage, { type, text })
  render(vNode, divContainer)
  // 优化3 清除定时器
  clearTimeout(timer)
  // 优化2  延迟两秒 删除虚拟dom
  timer = window.setTimeout(()=>{
    render(null,divContainer)
  },duration)
}
Message.success=function (text:string,duration=2000){
  Message({
    type:'success',
    text,
    duration
  })
}
Message.error=function (text:string,duration=2000){
  Message({
    type:'error',
    text,
    duration
  })
}
Message.warning=function (text:string,duration=2000){
  Message({
    type:'warning',
    text,
    duration
  })
}